<template>
  <div id="app">
    <div v-if="this.$store.state.showBackend" class="layout">
      <Row type="flex">
        <Col span="4" class="layout-menu-left">
        <Menu active-name="1-1" theme="dark" width="auto" :open-names="['1']">
          <div class="layout-logo-left">
            <img class="logo" src="https://www.fxpixels.site/lv5/public/img/t_logo.png" alt="">
            <p>
              <span>像素小站</span>
            </p>
          </div>
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              用户管理
            </template>
            <a href="./#/userlist">
              <MenuItem name="1-1">用户列表</MenuItem>
            </a>
            <a href="./#/adduser">
              <MenuItem name="1-2">添加用户</MenuItem>
            </a>
            <a href="./#/permission">
              <MenuItem name="1-3">权限管理</MenuItem>
            </a>
            <a href="./#/addpermission">
              <MenuItem name="1-4">新增权限</MenuItem>
            </a>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-keypad"></Icon>
              文章管理
            </template>
            <a href="./#/articlelist">
              <MenuItem name="2-1">文章列表</MenuItem>
            </a>
            <a href="./#/addarticle">
              <MenuItem name="2-2">新增文章</MenuItem>
            </a>
            <a href="./#/commentlist">
              <MenuItem name="2-3">评论列表</MenuItem>
            </a>
            <a href="./#/commentlist">
              <MenuItem name="2-4">栏目列表</MenuItem>
            </a>
            <a href="./#/commentlist">
              <MenuItem name="2-5">新增栏目</MenuItem>
            </a>
          </Submenu>

          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-analytics"></Icon>
              后台统计及扩展
            </template>
            <a href="./#/commentlist">
              <MenuItem name="3-1">用户与权限统计</MenuItem>
            </a>
            <a href="./#/articleandcategory">
              <MenuItem name="3-2">文章与栏目统计</MenuItem>
            </a>
            <MenuItem name="3-3">后台操作统计</MenuItem>
            <MenuItem name="3-5">通知消息</MenuItem>
            <a href="./#/imgupload">
              <MenuItem name="3-4">多图上传</MenuItem>
            </a>
          </Submenu>
        </Menu>
        </Col>
        <Col span="20">
        <div class="layout-header">
          <div class="avatar">
            <Dropdown style="margin-left: 20px" placement="bottom-end">
              <a href="javascript:void(0)">
                <div class="avatar-message">
                  <p>
                    <span style="font-size: 14px;">
                      <strong>{{ this.$store.state.username || null}}</strong>
                    </span>
                  </p>
                  <p>
                    <span>{{ this.$store.state.permission || null}}</span>
                  </p>
                </div>
                <Avatar :src="imgURLL" class="avatar-img" icon="person" size="large" />
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>个人资料</DropdownItem>
                <a href="./#/" @click="loginout()">
                  <DropdownItem>
                    退出
                  </DropdownItem>
                </a>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
        <div class="layout-breadcrumb">
          <Breadcrumb>
            <BreadcrumbItem href="/">
              <a @click="bread()">{{ Breadcrumb_1 }}</a>
            </BreadcrumbItem>
            <BreadcrumbItem v-if="this.$store.state.b2">{{ this.$store.state.b2 }}</BreadcrumbItem>
            <BreadcrumbItem v-if="this.$store.state.b3">{{ this.$store.state.b3 }}</BreadcrumbItem>
          </Breadcrumb>
        </div>
        <div class="layout-content">
          <div class="layout-content-main">
            <router-view/>
          </div>
        </div>
        <div class="layout-copy">
          <p>
            <span>Copyright © 2016-2018 像素小站. 粤ICP备17119684号.</span>
          </p>
          <p>
            <span>All rights reserved By FxPixels. </span>
          </p>
        </div>
        </Col>
      </Row>
    </div>
    <div class="registerimg" v-if="this.$store.state.showRegister">
      <img style="opacity: 0.8;left: -5%; position:fixed; width: 73%; height: 100%;" src="https://www.fxpixels.site/tp5/public/static/img/ff.jpg"
        alt="">
      <div style="position:fixed; font-size: 25px; left: 70%; top: 2%;">
        「 注 册 」
      </div>
      <div class="register">
        <Form ref="formItem" :model="formItem" :label-width="80" :rules="ruleValidate">
          <Row>
            <Col span="4" class="min-width">
            <div class="avatarImage">
              <div class="demo-upload-list" v-if="!this.$store.state.showUpload">
                <template>
                  <img :src="imgURL">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                  </div>
                </template>
              </div>
              <Upload v-if="this.$store.state.showUpload" ref="upload" :show-upload-list="false" :on-success="handleSuccess" :format="['jpg','jpeg','png']"
                :max-size="2048" type="drag" name="image" action="https://www.fxpixels.site/tp5/public/index.php/backend/regimg"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="camera" size="20"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img :src="imgURL" v-if="visible" style="width: 100%">
              </Modal>
              <p>头像</p>
            </div>
            <FormItem label="用户名" prop="username">
              <Input :maxlength="12" v-model="formItem.username" placeholder="输入用户名" icon="person"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input :maxlength="16" type="password" v-model="formItem.password" placeholder="输入密码" icon="unlocked"></Input>
            </FormItem>
            <FormItem label="重复密码" prop="repassword">
              <Input :maxlength="16" :on-change="setPassword" type="password" v-model="formItem.repassword" placeholder="再次输入密码" icon="key"></Input>
              <div class="pwdtip">{{setPassword}}</div>
            </FormItem>
            <FormItem label="性别" prop="gender">
              <RadioGroup v-model="formItem.gender">
                <Radio label="male">男</Radio>
                <Radio label="female">女</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="出生日期">
              <FormItem prop="date">
                <DatePicker type="date" confirm placeholder="选择或者填写日期" v-model="formItem.date"></DatePicker>
              </FormItem>
            </FormItem>
            <FormItem label="E-mail" prop="email">
              <Input v-model="formItem.email" placeholder="输入电子邮箱" icon="ios-email"></Input>
            </FormItem>
            <FormItem label="个人介绍" prop="desc">
              <Input :maxlength="100" v-model="formItem.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="个人兴趣爱好…"></Input>
            </FormItem>
            <FormItem class="optionButton">
              <Button shape="circle" type="ghost" @click="handleReset('formItem')" style="margin-left: 8px">清除</Button>
              <Button shape="circle" type="primary" @click="handleSubmit('formItem')">注册</Button>
            </FormItem>
            <div class="copyright">
              <p>
                <strong>
                  <span>已经有账号？前往
                    <a @click="goToLogin()">「登录」</a>
                  </span>
                </strong>
              </p>
              <br>
              <p>
                <span>Copyright © 2016-2018 像素小站. 粤ICP备17119684号.</span>
              </p>
              <p>
                <span>All rights reserved By FxPixels. </span>
              </p>
            </div>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div v-if="this.$store.state.showLogin">
      <Login></Login>
    </div>
  </div>
</template>

<script>
  import Login from "./pages/Login.vue";
  import md5 from "js-md5";
  export default {
    name: "app",
    components: {
      Login
    },
    data() {
      return {
        Breadcrumb_1: "首页",
        username: null,
        userPermission: null,
        imgName: "",
        imgURL: this.$store.state.avatar,
        visible: false,
        file: null,
        value1: "1996-01-01",
        formItem: {
          username: null,
          password: null,
          repassword: null,
          gender: null,
          email: null,
          date: "1996-01-01",
          desc: null
        },
        ruleValidate: {
          username: [{
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }],
          repassword: [{
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }],
          email: [{
              required: true,
              message: "电子邮箱不能为空",
              trigger: "blur"
            },
            {
              type: "email",
              message: "电子邮箱格式不对",
              trigger: "blur"
            }
          ],
          date: [{
            required: true,
            type: "date",
            message: "必填，请填入你的出生日期",
            trigger: "change"
          }],
          gender: [{
            required: true,
            message: "请选择性别",
            trigger: "change"
          }]
        }
      };
    },
    mounted() {
      this.keepAlive();
    },
    methods: {
      bread() {
        this.$store.commit("bread", "");
      },
      loginout() {
        var that = this;
        this.$axios.get("backend/loginout", null, function (res) {
          if (res == 0) {
            that.$store.state.showLogin = true;
            that.$store.state.showRegister = false;
            that.$store.state.showBackend = false;
            localStorage.username = "0";
            that.$store.state.avatar = null;
            that.imgURL = null;
          }
        });
      },
      keepAlive() {
        let userdata = {
          username: localStorage.username
          // username: this.$store.state.username
        };
        // console.log(userdata)
        var that = this;
        this.$axios.post("backend/keepalive", userdata, function (res) {
          // console.log(res)
          if (res == 0) {
            that.$store.state.showLogin = true;
            that.$store.state.showRegister = false;
            that.$store.state.showBackend = false;
            localStorage.username = "0";
            that.$store.state.avatar = null;
            that.imgURL = null;
          } else {
            that.$store.state.showLogin = false;
            that.$store.state.showRegister = false;
            that.$store.state.showBackend = true;
            that.$store.state.username = res.username;
            that.$store.state.permission = res.permission;
            that.$store.state.avatar = res.avatar;
            localStorage.username = res.username;
          }
        });
      },
      goToLogin() {
        this.$store.state.showLogin = true;
        this.$store.state.showRegister = false;
        this.$store.state.showBackend = false;
      },
      handleSubmit() {
        // console.log(this.imgURL);
        if (this.imgURL == null) {
          this.$Notice.warning({
            title: "头像错误",
            desc: "请上传头像，并保持在2M以内。(建议比例1:1)"
          });
          return false;
        } else if (
          this.formItem.username == null ||
          this.formItem.username.length < 6 ||
          this.formItem.username.length > 12
        ) {
          this.$Notice.warning({
            title: "用户名输入错误",
            desc: "用户名太短，请保持在6~12位。"
          });
          return false;
        } else if (
          this.formItem.password == null ||
          this.formItem.repassword == null ||
          this.formItem.password.length < 6 ||
          this.formItem.password.length > 16
        ) {
          this.$Notice.warning({
            title: "密码输入错误",
            desc: "密码太短，请保持在6~16位。"
          });
          return false;
        } else if (this.formItem.password != this.formItem.repassword) {
          this.$Notice.warning({
            title: "密码输入错误",
            desc: "两次密码输入不一样。"
          });
          return false;
        } else if (this.formItem.gender == null) {
          this.$Notice.warning({
            title: "性别选择",
            desc: "请选择你的性别。"
          });
          return false;
        } else if (this.formItem.date == null) {
          this.$Notice.warning({
            title: "日期输入",
            desc: "日期输入错误。"
          });
          return false;
        } else if (this.formItem.email == null) {
          this.$Notice.warning({
            title: "email输入",
            desc: "电子邮箱输入错误。"
          });
          return false;
        } else {
          let userdata = {
            username: this.formItem.username,
            password: md5(this.formItem.password),
            gender: this.formItem.gender,
            date: this.formItem.date,
            email: this.formItem.email,
            intro: this.formItem.desc,
            avatar: this.imgURL
          };
          // console.log(userdata)
          var that = this;
          this.$axios.post("backend/register", userdata, function (res) {
            console.log(res);
            if (res == 0) {
              that.$Notice.error({
                title: "用户名输入错误",
                desc: "用户名已经被占用，请重新输入。"
              });
              return false;
            } else {
              that.$store.state.showLogin = false;
              that.$store.state.showRegister = false;
              that.$store.state.showBackend = true;
              that.$store.state.username = res.username;
              that.$store.state.permission = res.permission;
              that.$store.state.avatar = res.avatar;
              localStorage.username = res.username;
            }
          });
        }
      },
      handleReset(name) {
        this.formItem = {};
        // this.$refs[name].resetFields();
      },
      handleView(name) {
        this.imgName = name;
        this.visible = true;
      },
      handleRemove(file) {
        this.$store.commit("changeUploadbar");
      },
      handleSuccess(res, file) {
        this.$store.commit("changeUploadbar");
        this.imgURL = res;
      },
      handleFormatError(file) {},
      handleMaxSize(file) {
        this.$Notice.warning({
          title: "上传失败",
          desc: "文件：" + file.name + " 太大，请保持在2M以内。"
        });
      },
      handleBeforeUpload(file) {
        this.file = file;
        // console.log(file);
        return true;
      }
    },
    computed: {
      setPassword: function () {
        if (this.formItem.password != this.formItem.repassword) {
          // console.log(this.formItem.password+"    "+this.formItem.repassword +this.ruleValidate.repassword[0].message)
          this.ruleValidate.repassword[0].message = "两次密码不一样";
          // return this.ruleValidate.repassword[0].message;
        } else {
          // console.log(this.formItem.password+"    "+this.formItem.repassword + '密码相同了')
          this.ruleValidate.repassword[0].message = "密码不能为空";
        }
      },
      imgURLL: function () {
        this.imgURL = this.$store.state.avatar;
        return this.imgURL;
      }
    }
  };

</script>

<style>
  body {
    overflow-x: hidden;
  }
  /* blockquote 样式 */

  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  /* code 样式 */
  /* code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
} */

  .search-bar {
    width: 20%;
    /* margin-top: 20px; */
    transform: translateY(68%);
    margin-left: 30px;
    display: inline-block;
  }

  pre code {
    display: block;
  }

  .copyright {
    text-align: right;
  }

  .pwdtip {
    color: #ed3f14;
  }

  .optionButton {
    text-align: right;
    padding-right: 10px;
  }

  .optionButton button {
    margin-left: 20px;
  }

  .min-width {
    min-width: 320px;
    right: -77%;
    transform: translateX(-15%);
  }

  .register {
    /* top: 50%; */
    transform: translateY(20%);
  }

  .registerimg {
    /* background-color: #464c5b; */
  }

  .avatarImage {
    text-align: center;
    transform: translateX(18px);
    margin-bottom: 30px;
  }

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
  }

  .logo {
    width: 30px;
    height: 30px;
  }

  .layout-breadcrumb {
    padding: 10px 15px 0;
  }

  .layout-content {
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }

  .layout-content-main {
    padding: 10px;
    min-height: 700px;
  }

  .layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }

  .layout-menu-left {
    background: #464c5b;
  }

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  .layout-logo-left {
    width: 90%;
    height: 30px;
    /* background: #5b6270; */
    border-radius: 3px;
    margin: 15px auto;
    text-align: center;
  }

  .layout-logo-left p {
    transform: translateY(-50%);
    display: inline-block;
    color: #f9f9fa;
  }

  .avatar {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }

  .avatar span {
    margin-right: 10px;
    color: #495060;
  }

  .avatar-message {
    display: inline-block;
  }

  .avatar-img {
    margin-bottom: 20px;
  }

  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

</style>
